import React from 'react';
import {
  View,
  Text,
  ListView,
  StyleSheet,
  Platform,
} from 'react-native';
import PxToDp from '../../../utils/PxToDp';
import PreferDetailsList from './PreferDetailsList';

class CarColor extends React.Component {
  constructor(props) {
    super(props);

    const { screenProps } = this.props;
    const { car } = screenProps;
    const { data } = car;
    const { experiences } = data;

    this.ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 });
    this.state = {
      experiences,
    };
  }

  componentWillMount() {
    if (Platform.OS === 'android' && this.state.experiences && this.state.experiences.length > 10) {
      const list = this.state.experiences.slice(0, 10);
      this.setState({ experiences: list });
    }
  }

  render() {
    return (
      <View style={[styles.flex, styles.paddingLR]}>
        <View style={[styles.row, styles.between, styles.titleWrapper]}>
          <View style={[styles.row]}>
            <Text style={[styles.title, styles.durationTitle]}>观看时长</Text>
            <Text style={[styles.minutes]}>(分钟)</Text>
          </View>
        </View>
        <ListView
          dataSource={this.ds.cloneWithRows(this.state.experiences)}
          renderRow={experience =>
            <PreferDetailsList
              name={experience[1].name}
              duration={experience[1].mins}
              rate={experience[1].mins_rate}
              times={experience[1].count}
              type={'noColor'}
            />
          }
        />

      </View>
    );
  }
}

const styles = StyleSheet.create({
  flex: {
    flex: 1,
  },
  row: {
    flexDirection: 'row',
  },
  between: {
    justifyContent: 'space-between',
  },
  paddingLR: {
    paddingLeft: PxToDp(10),
  },
  titleWrapper: {
    marginTop: PxToDp(24),
    marginBottom: PxToDp(10),
    paddingRight: PxToDp(32),
  },
  title: {
    color: '#333',
    fontSize: PxToDp(14),
  },
  durationTitle: {

  },
  minutes: {
    marginLeft: PxToDp(5),
    paddingTop: PxToDp(3),
    color: '#3f3f3f',
    fontSize: PxToDp(11),
  },
});

export default CarColor;

